<template>
    <div class="register-wrapper">
      <top-bar :title="topTitle"></top-bar>

      <div class="baby-info box-info">
        <p class="title">婴儿信息</p>
        <x-input title="婴儿姓名" placeholder="请输入婴儿姓名" :show-clear="false" v-model="form.name"></x-input>
        <div class="data-time-con">
          <datetime
            v-model="form.birthday"
            @on-change="datachange"
            :end-date="today"
            placeholder="请选择出生日期"
            title="出生日期"
            class="data-time"
          ></datetime>
          <img src="../../../static/images/login/calendar.png" class="calendar-img">
        </div>
        <div class="sex-select">
          <popup-picker
            title="性别"
            :data="sexList"
            v-model="sexValue"
            @on-change="sexChange"
            placeholder="请选择性别"></popup-picker>
        </div>
      </div>

      <div class="others-info box-info">
        <p class="title">其他信息</p>
        <x-input title="电话号码" placeholder="请输入电话号码" :show-clear="false" v-model="form.userName"></x-input>
        <x-input title="发送验证码" class="weui-vcode"  :show-clear="false" v-model="form.validCode">
          <x-button slot="right"  v-show="codeButton"  class="gain-code" @click.native="gainCode">获取验证码</x-button>
          <a slot="right" class="code-num" v-show="codeShow">
            <countdown v-model="codeTime"  v-show="codeShow" :start="codeStart"></countdown><a v-if="codeShow">s</a>
          </a>
        </x-input>
        <x-input title="确认密码"  type="password" v-model="form.password"  placeholder="请输入密码" :show-clear="false"></x-input>
        <x-input title="确认密码"  type="password"  v-model="againFassword" placeholder="请确认密码" :show-clear="false" class="sure-password"></x-input>
      </div>

      <div class="submit-btn">
        <x-button class="submit"  @click.native="submitBtn">提交</x-button>
      </div>

      <img src="../../../static/images/login/registered.png" class="full-img registered-img">
    </div>
</template>

<script>
  import { XInput,XButton ,Datetime ,Countdown ,PopupPicker} from 'vux'
  import {getValidCode} from '../../api/common';
  import {registerBaby} from '../../api/login/login'
  import TopBar from '@/components/top'

    export default {
        name: "register",
        metaInfo () {
          return {
            title: '儿童注册'
          }
        },
      data(){
        return{
          topTitle:'儿童注册',
          dataValue:'',
          form:{
            name:'',
            userName:'',   //用户账号（电话）
            password:'',
            validCode:'',
            birthday:'',
            sex:0,
          },
          againFassword:'',

          codeTime: 60,
          codeShow:false,
          codeStart:false,
          codeButton:true,

          sexValue:['男'],
          sexList: [['男', '女']],

          today:this.$moment().format('YYYY-MM-DD'),
        }
      },
      watch:{
        // 验证码
        codeTime(val,old){
          if(val==0){
            this.codeButton=true;
            this.codeShow=false;
            this.codeStart=false;
            this.codeTime=60;
          }
        }
      },
      computed:{
        /*submitDisabled(){
          let conditions1=this.form.name==''||this.form.birthday==''||this.form.userName==''||this.form.validCode==''||this.form.password=='';
          let conditions2=this.form.password !=this.againFassword;

           if( conditions1||conditions2){
             return true
           }
          return false
        }*/
      },
      methods:{
        gainCode(){
          let that=this;
          console.log('测试')
          if(this.form.userName==''){
            that.$vux.toast.show({
              type:'text',
              text:'请输入电话号码'
            })
          }else{
            getValidCode({
              telephone:this.form.userName
            }).then((res) => {
              if(res.data.result==0){
                that.codeTime=that.codeTime;
                that.codeButton=false;
                that.codeShow=true;
                that.codeStart=true;
              }else{
                that.$vux.toast.show({
                  type:'text',
                  text:res.data.message
                })
              }
            })
          }
        },
        datachange(val){
          console.log(val)
        },
        sexChange(val){
          if(val[0]=='男'){
            this.form.sex=0;
          }else{
            this.form.sex=1;
          }
        },
        submitBtn(){
          let formData=Object.assign(this.form);

          if(this.form.name==''){
            this.$vux.toast.text('请输入婴儿姓名', 'middle')
          }else if(this.form.birthday==''){
            this.$vux.toast.text('请选择出生日期', 'middle')
          }else if(this.form.userName==''){
            this.$vux.toast.text('请输入电话号码', 'middle')
          }else if(this.form.validCode==''){
            this.$vux.toast.text('请输入验证码', 'middle')
          }else if(this.form.password==''){
            this.$vux.toast.text('请输入密码', 'middle')
          }else if(this.form.againFassword==''){
            this.$vux.toast.text('请输入密码', 'middle')
          }else if(this.form.password !=this.againFassword){
            this.$vux.toast.text('两次密码不相等', 'middle')
          }else{
            registerBaby(formData).then((res) => {
              if(res.data.result==0){
                this.$router.push({path: '/'})
              }else{
                this.$vux.toast.text(res.data.msg, 'middle')
              }
            })
          }

        }
      },
      components: {
        XInput,
        XButton,
        Datetime,
        Countdown,
        PopupPicker,
        TopBar
      }
    }
</script>

<style lang="scss">
  .register-wrapper{
    .box-info{
      background:rgba(255,255,255,1);
      box-shadow:-1px 0px 19px 2px rgba(50,51,51,0.06);
      border-radius:20px;
      padding:20px;
      margin:0 30px;
      &.baby-info{
        margin:20px 30px;
      }
      .gain-code{
        color:rgba(245,99,99,1);
        font-size:14px;
        background-color:#fff;
        padding-right:0;
        &:after{
          border:none;
        }
        &.weui-btn_default:not(.weui-btn_disabled):active{
          color:rgba(245,99,99,1);
          background-color:#fff;
          padding:0;
        }
      }
      .title{
        font-size:14px;
        color:rgba(38,38,38,1);
        border-left:4px solid #F56363;
        height: 14px;
        line-height: 14px;
        padding-left:8px;
        margin-bottom: 10px;
      }
      .weui-cell{
        padding: 10px 15px 10px 10px;
        border-bottom: 1px solid #EEEEEE;
        &:before{
          border-top:none;
        }
        .weui-label{
          font-size:14px;
          color:rgba(38,38,38,1);
        }
        .weui-input{
          color:rgba(38,38,38,1);
          font-size: 14px;
          text-align: right;
          &::-webkit-input-placeholder {
            color:rgba(173,173,173,1);
            font-size: 14px;
          }
        }
      }
      .sure-password{
        border-bottom: none;
      }
      .sex-select{
        .weui-cell{
          border-bottom:none;
        }
        .weui-label{
          font-size: 15px;
          font-family: PingFang-SC-Regular;
          color: #262626;
        }
        .vux-cell-placeholder{
          color:rgba(173,173,173,1);
          font-size: 14px;
        }
        .vux-cell-value{
          color:rgba(38,38,38,1);
          font-size: 14px;
          text-align: right;
        }
      }
    }
    .submit-btn{
      padding: 0 30px;
      margin-top: 60px;
      .submit{
        height:48px;
        line-height: 48px;
        background:rgba(245,99,99,1);
        border-radius:50px;
        font-size:14px;
        color:rgba(255,255,255,1);
        &.weui-btn_disabled.weui-btn_default{
          opacity: 0.5;
        }
      }
    }
    .registered-img{
      margin-top:-25px;
    }
    .data-time-con{
      position: relative;
      border-bottom: 1px solid #EEEEEE;
      .data-time{
        border-bottom:none;
        p{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          color:rgba(38,38,38,1);
        }
        &.weui-cell_access .weui-cell__ft:after{
          border-width:0;
        }
        .vux-cell-value{
          margin-right: 15px;
          color: #262626;
          font-size:14px;
        }
      }
      .calendar-img{
        width:25px;
        height:28px;
        position: absolute;
        top:5px;
        right:12px;
      }
      .vux-cell-placeholder{
        color:rgba(173,173,173,1);
        font-size: 14px;
        padding-right: 10px;
      }
    }
    .code-num{
      margin-left: 15px;
      span{
        font-size: 12px;
      }
    }
  }
</style>
